<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .header{
        position: fixed;
        top: 0;
        z-index:999;
        width: 100%;
        height: 80px;
        min-width: 1200px;
        background-color: #fff;
        border-bottom: 1px solid #d8d8d8;
    }
    .header>.header-inner{
        width: 1200px;
        margin: 0 auto;
        height: 80px;
    }
    .logo{
        float: left;
        margin-top: 20px;
        width: 133px;
        height: 80px;
        background: url("img/maoyan.png") no-repeat;
    }
    /* 菜单栏地址选项 */
    .city-selected{
        top: 27%;
        position: relative;
        color: black;
        float: left;
        margin-left: 20px;
        margin-top: 10px;
        height: 100%;
        cursor: pointer;
    }
    .caret{
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 2px;
        vertical-align: middle;
        border-top: 5px solid #666;
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
    }
    /* 菜单栏首页列表 */
    .nav{
        background-color: #fff;
        cursor: pointer;
        overflow: hidden;
        width: 530px;
        float: left;
        margin-left: 20px;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    .index{
        cursor: pointer;
        width: 70px;
        height: 80px;
        background: red;
    }
    .index .f{
        text-align: center;
        display: inline-block;
        height: 80px;
        line-height: 80px;
        width: 100%;
        font-size: 18px;
        color: #fff;
    }
    .nav .unit{
        cursor: pointer;
        width: 70px;
        height: 80px;
    }
    .nav .s{
        text-align: center;
        display: inline-block;
        height: 80px;
        line-height: 80px;
        width: 100%;
        font-size: 18px;
        color: #333;
    }
    .nav .s:hover{
        color: red;
    }
    /* 搜索栏 */
    .header .app{
        top: 25%;
        position: relative;
        color: black;
        float: left;
        margin-left: 20px;
        margin-top: 10px;
        height: 100%;
        cursor: pointer;
    }
    .app .ipone{
        float: left;
        width: 19px;;
        height: 80px;
        background: url("img/phone.png") no-repeat;
    }
    /* 搜索栏 */
    .header .search{
        top: 12%;
        position: relative;
        color: black;
        float: left;
        margin-left: 20px;
        margin-top: 10px;
        height: 100%;
        cursor: pointer;
    }
    .search .getMovie{
        display: inline-block;
        height: 40px;
        line-height: 1.2;
        width: 150px;
        padding: 0 40px 0 20px;
        border: 1px solid #ccc;
        font-size: 14px;
        border-radius: 30px;
        background-color: #faf8fa;
        overflow: hidden;
        color: #333;
    }
    .search .ra{
        margin-left: -44px;
        height: 42px;
        width: 40px;
        background: red url("img/search.png") ;
        border-radius: 50px;
        border: none;
    }
    /* 账号栏 */
    .header .user{
        top: 14%;
        position: relative;
        color: black;
        float: left;
        margin-left: 20px;
        margin-top: 10px;
        cursor: pointer;
    }
    .user img{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        cursor: pointer;
    }
    .user .caret1{
        display: inline-block;
        margin-top: -25px;
        width: 0;
        height: 0;
        margin-left: 2px;
        vertical-align: middle;
        border-top: 5px solid #666;
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
    }
    /* 头部与身体的间隔 */
    .solute{
        height: 139px;
    }
    /* 身体 */
    .contain{
        position: relative;
        height: 600px;
        width: 1200px;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
        /* background-color: rebeccapurple; */
    }
    /* 身体左边 */
    .contain .main{
        position: relative;
        height: 600px;
        width: 754px;
        padding: 0 18px;
        margin-right: 363px;
        /* background-color: black; */
    }
    .main .title-size{
        color: red;
        display: inline;
        font-size: 26px;
        font-weight:bold;
    }
    .main .title-size1{
        float: right;
        color: red;
        display: inline;
        font-size: 26px;
        font-weight: 400;
    }
    /* 电影列表 */
    .main .main-content{
        width: 100%;
        height: 600px;;
        margin-top: 30px;
        /* background-color: aqua; */
        
    }
    .main-content .move-list{
        margin: -27px 0px 21px 0px;
        
    }
    .move-list .list-move{
        position: relative;
        display: inline-block;
        left: 3px;
        width: 148px;
        height: 208px;
        padding: 16px;
        border: none;
    }
    .move-list .list-move-des{
        position: absolute;
        width: 83%;
        height: 35px;
        bottom: 15px;
        /*颜色渐变*/
        /*background-image: linear-gradient(rgba(0, 0, 0, 0.11), rgba(0, 0, 0, 0.16));*/
        background: url("img/bg1.png") no-repeat ;
        background-size: 100% 100%;
    }

    /* 设置评分 */
    .list-move .left-su{
        position: absolute;
        z-index: 1000;
        color: #fff;
        font-weight: bold;
        font-size: 16px;
        line-height: 22px;
        white-space: nowrap;/*超出一行的部分隐藏*/
        overflow: hidden;/*文本缩略*/
        text-overflow: ellipsis;/*不主动换行*/
        bottom: 16px;
        left: 17px;
        width: 100px;

    }
    .list-move .left-su1{
        position: absolute;
        z-index: 1000;
        color: burlywood;
        font-weight: bold;
        font-size: 24px;
        line-height: 22px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        bottom: 16px;
        left: 126px;

    }
    .list-move .left-su2{
        position: absolute;
        z-index: 1000;
        color: burlywood;
        font-weight: bold;
        font-size: 16px;
        line-height: 22px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        bottom: 14px;
        left: 146px;
    }
    .list-move img{
        visibility: visible;
        width: 100%;
        height: 100%;
    }
    .list-move .list-move-text{
        height: 39px;
        line-height: 39px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        font-size: 18px;
        color: red;
        border: 1px solid #efefef;
    }
    .list-move-text a{
        color: #ef4238;
    }
    .list-move-text:hover{
        color: #fff;
        background-color: #ef4238;
    }
    
    /* 身体右边 */
    .contain .aside{
        position: absolute;
        top: 0px;
        right: 0px;
        height: 500px;
        width: 360px;
        /* background-color: #333; */
    }
    .aside .right-text{
        display: inline;
        font-size: 26px;
        font-weight:bold;
        color: red;
    }
    .aside .right-content{
        width: 100%;
        margin-top: 23px;
    }
    .right-content ul{
        list-style: none;
        padding: 0;
        margin: 0;
    }
    /* 右边 */
    .right-content .content1{
        cursor: pointer;
    }
    .right-content .content1:hover{
        background-color: rgba(128, 128, 128, 0.08);
    }
    /* .right-content .content1:hover{
        height: 78px;
        margin-bottom: 11px;
        border: 1px solid #efefef;
    } */
    .content1 .content1-left{
        position: relative;
        width: 120px;
        height: 90px;
        float: left;
    }

    .content1-left .content1-left-icon{
        display: inline-block;
        position: absolute;
        left: 0;
        top: 0;
        width: 22px;
        height: 25px;
        background: url("img/right1cha.png") no-repeat;
    }
    .content1-right{
        height: 90px;
    }

    .content2{
        height: 55px;
    }
    .content2:hover{
        background-color: rgba(128, 128, 128, 0.08);
    }
    .spanClass{
        position: relative;
        display: block;
        height: 35px;
        line-height: 35px;
        font-size: 21px;
    }
    .spanClass .spanClassp{
        position: absolute;
        right: 0%;
        color: red;
    }
/*  今日大盘*/
    .today{
        margin-top: 29px;
        background-color: #fdfdfd;
        border: 0px solid #efefef;
        padding-right: 15px;
    }
    .today h3{
        float: left;
        width: 20px;
        height: 83px;
        padding: 11px;
        color: #fff;
        background-color: #ef4238;
        text-align: center;
        font-weight: 400;
        font-size: 17px;
    }
    .today .today-right{
        font-size: 14px;
        margin-left: 54px;
        color: #ef4238;
        padding-top: 20px;
    }
</style>
<body>
    <!-- 头部 -->
    <div class="header">
      <div class="header-inner">
        <div class="logo"></div>
        <div class="city-selected">
           武汉
           <span class="caret"></span>
        </div>
        <!-- 菜单栏首页列表-->
        <div class="nav">
            <div class="index"><a class="f">首页</a></div>
            <div class="unit"><a class="s">电影</a></div>
            <div class="unit"><a class="s">影院</a></div>
            <div class="unit"><a class="s">演出</a></div>
            <div class="unit"><a class="s">榜单</a></div>
            <div class="unit"><a class="s">热点</a></div>
            <div class="unit"><a class="s">商城</a></div>
        </div>
        <!-- app下载 -->
        <div class="app">
            <span class="ipone"></span>
            <span class="appLoad">APP下载</span>
            <span class="caret"></span>
        </div>
        <!-- 搜索栏 -->
        <div class="search">
            <input type="text" placeholder="找影视剧、影人、影院" class="getMovie">
        </div>
        <!-- 账号栏 -->
        <div class="user">
            <img src="https://p0.meituan.net/movie/7dd82a16316ab32c8359debdb04396ef2897.png">
            <span class="caret1"></span>
        </div>
      </div>
    </div>
    <!-- 头部与身体的间隔 -->
    <div class="solute"></div>
    <!-- 身体 -->
    <div class="contain">
        <!-- 身体左边 -->
        <div class="main">
            <div class="title">
                <span class="title-size">正在热映（28部）</span>
                <span class="title-size1">全部</span>
            </div>
            <!-- 内容 -->
            <div class="main-content">
                <div class="move-list">
                        <div class="list-move">
                            <img src="img/1.jpg">
                                <span class="left-su">想见你</span>
                                <span class="left-su1">9.</span>
                                <span class="left-su2">1</span>
                            <!--背景渐变div-->
                            <div class="list-move-des"></div>
                            <div class="list-move-text" >
                                购票
                            </div>
                        </div>             
                        <div class="list-move">
                            <img src="img/2.jpg">

                                <span class="left-su">阿凡达:水之道</span>
                                <span class="left-su1">9.</span>
                                <span class="left-su2">2</span>
                            <div class="list-move-des"></div>
                            <div class="list-move-text" >
                                购票
                            </div>
                        </div>
                        <div class="list-move">
                            <img src="img/3.jpg">
                            <span class="left-su" title="航海王:红发海贼团">航海王:红发海贼团</span>
                            <span class="left-su1">9.</span>
                            <span class="left-su2">2</span>
                            <div class="list-move-des"></div>
                            <div class="list-move-text" >
                                购票
                            </div>
                        </div>
                        <div class="list-move">
                            <img src="img/4.jpg">
                            <span class="left-su">绝望主夫</span>
                            <span class="left-su1">9.</span>
                            <span class="left-su2">0</span>
                            <div class="list-move-des"></div>
                            <div class="list-move-text" >
                                购票
                            </div>
                        </div>
                        <div class="list-move">
                            <img src="img/5.jpg">
                            <span class="left-su">扫黑风暴</span>
                            <span class="left-su1">8.</span>
                            <span class="left-su2">0</span>
                            <div class="list-move-des"></div>
                            <div class="list-move-text" >
                                购票
                            </div>
                        </div>
                        <div class="list-move">
                            <img src="img/6.jpg">
                            <span class="left-su" title="名侦探柯南:万圣节的新娘">名侦探柯南:万圣节的新娘</span>
                            <span class="left-su1">9.</span>
                            <span class="left-su2">1</span>
                            <div class="list-move-des"></div>
                            <div class="list-move-text" >
                                购票
                            </div>
                        </div>
                        <div class="list-move">
                            <img src="img/7.jpg">
                            <span class="left-su">唬胆特工</span>
                            <span class="left-su1">9.</span>
                            <span class="left-su2">0</span>
                            <div class="list-move-des"></div>
                            <div class="list-move-text" >
                                购票
                            </div>
                        </div>
                        <div class="list-move">
                            <img src="img/8.jpg">
                            <span class="left-su">万里归途</span>
                            <span class="left-su1">9.</span>
                            <span class="left-su2">5</span>
                            <div class="list-move-des"></div>
                            <div class="list-move-text" >
                                购票
                            </div>
                        </div>
                </div>
            </div>
        </div>
        <!-- 身体右边 -->
        <div class="aside">
            <h2 class="right-text">今日票房</h2>
            <div class="right-content">
                <ul>
                    <li class="content1">
                        <div class="content1-left">
                            <i class="content1-left-icon" ></i>
                            <img src="img/right1.jpeg">
                        </div>
                        <div class="content1-right">
                            <!-- <div class="content1-right1"> -->
                                <br>
                                <span style="font-weight:bold;">&nbsp阿凡达:水之道</span>
                                <p style="color: red;">&nbsp2078.10万</p>
                            <!-- </div> -->
                        </div>
                    </li>
                    <li class="content2">
                        <span class="spanClass">
                            <i style="color: red;">2</i>
                            <span>想见你</span>
                            <span class="spanClassp">772.96万</span>
                        </span>
                    </li>
                    <li class="content2">
                        <span class="spanClass">
                            <i style="color: red;">3</i>
                            <span>航海王:红发歌姬</span>
                            <span class="spanClassp">80.52万</span>
                        </span>
                    </li>
                    <li class="content2">
                        <span class="spanClass">
                            <i style="color: #666;">4</i>
                            <span>名侦探柯南:万圣节的新...</span>
                            <span class="spanClassp">36.65万</span>
                        </span>
                    </li>
                    <li class="content2">
                        <span class="spanClass">
                            <i style="color: #666;">5</i>
                            <span>穿靴子的猫2</span>
                            <span class="spanClassp">28.80万</span>
                        </span>
                    </li>
                </ul>
            </div>
            <!-- 今日大盘 -->
            <div class="today">
                <h3>今日大盘</h3>
                <div class="today-right">
                    <span style="font-size: 40px;color: red;">3031.1</span>万<br><br>
                    <span style="color: #666;">北京时间 19:05:27&nbsp&nbsp&nbsp猫眼专业版实时票房数据</span>
                </div>
            </div>
        </div>
    </div>
    
</body>
</html>